import { Table, Space, Tag, Progress, message, Image } from 'antd'
import { DownloadOutlined, PauseCircleOutlined } from '@ant-design/icons'
import { ipcService } from '../../api/service'
import type { VideoInfo, DownloadProgress } from '../../api/service'
import AuthButton from '../common/AuthButton'

interface VideoListProps {
  videos: VideoInfo[]
  downloadProgress: Record<string, DownloadProgress>
}

function VideoList({ videos, downloadProgress }: VideoListProps) {
  const handleDownloadVideo = async (video: VideoInfo) => {
    try {
      await ipcService.downloadVideo(video.id)
      message.info(`开始下载 ${video.title}`)
    } catch (error) {
      message.error(`下载失败: ${error}`)
    }
  }

  const handleCancelDownload = async () => {
    try {
      // 暂时没有取消下载功能
      message.info('取消下载功能暂未实现')
    } catch (error) {
      message.error(`取消下载失败: ${error}`)
    }
  }

  const columns = [
    {
      title: '视频',
      dataIndex: 'coverUrl',
      key: 'coverUrl',
      width: 120,
      render: (coverUrl: string) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Image
            src={coverUrl}
            width={80}
            height={60}
            style={{ borderRadius: 4, objectFit: 'cover' }}
            fallback=""
          />
        </div>
      )
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      render: (title: string, record: VideoInfo) => (
        <div>
          <div style={{ fontWeight: 500, marginBottom: 4 }}>{title}</div>
          <div style={{ fontSize: 12, color: '#666' }}>
            {record.duration}秒
          </div>
        </div>
      )
    },
    {
      title: '状态',
      key: 'status',
      width: 200,
      render: (_: any, record: VideoInfo) => {
        const progress = Object.values(downloadProgress).find(p => p.videoId === record.id)
        if (progress) {
          return (
            <div>
              <div style={{ marginBottom: 4 }}>
                <Progress
                  percent={progress.progress}
                  size="small"
                  status={progress.status === 'downloading' ? 'active' : progress.status === 'completed' ? 'success' : 'exception'}
                />
              </div>
              <div style={{ fontSize: 12, color: '#666' }}>
                {progress.status === 'downloading' && '下载中'}
                {progress.status === 'completed' && '下载完成'}
                {progress.status === 'failed' && `下载失败: ${progress.error}`}
              </div>
            </div>
          )
        }
        return <Tag color="default">未下载</Tag>
      }
    },
    {
      title: '操作',
      key: 'actions',
      width: 120,
      render: (_: any, record: VideoInfo) => {
        const progress = Object.values(downloadProgress).find(p => p.videoId === record.id)
        const isDownloading = progress && progress.status === 'downloading'

        return (
          <Space>
            {isDownloading ? (
              <AuthButton
                danger
                icon={<PauseCircleOutlined />}
                onClick={() => handleCancelDownload()}
              >
                取消
              </AuthButton>
            ) : (
              <AuthButton
                type="primary"
                icon={<DownloadOutlined />}
                onClick={() => handleDownloadVideo(record)}
              >
                下载
              </AuthButton>
            )}
          </Space>
        )
      }
    }
  ]

  return (
    <Table
      columns={columns}
      dataSource={videos}
      rowKey="id"
      pagination={false}
      scroll={{ y: 'calc(100vh - 200px)' }}
    />
  )
}

export default VideoList